//纵向经费
<template>
  <div class="module_">
    <div class="mb8">
      <search @clearSearch='clearSearch'>
        <el-form label-width='95px' inline autocomplete="off"  :model="pageparm" class="search_box">
          <el-form-item label="项目名称">
            <el-input size="medium" clearable v-model.trim="pageparm.name" placeholder="请输入项目名称搜索"/>
          </el-form-item>
          <el-form-item label="负责人姓名">
            <inputSearch ref="search_e" placeholder="请输入负责人姓名搜索" @onChange='searchChane($event,"leader_id")'  />
          </el-form-item> 
        </el-form>
        <template slot="footer">
          <exportExcel :apiFn="Apiprojectfunds" name='纵向经费'  />
          <printComp :apiFn="Apiprojectfunds" :options="pageparm" :properties='properties' :self="true" :dataFn='printData' />
        </template>
      </search>
    </div>
    <el-table
      ref="table"
      :data="tableData"
      class="flex-1"
      height="100%" size="medium" 
      border
      highlight-current-row
      v-loading="tableLoading"
      stripe
      @sort-change="tableSortChange">  
      <el-table-column
        align="center"
        v-for="(item,i) in headerList"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        :fixed="i === 0 ? true: false"
        show-overflow-tooltip
        :sortable="item.noSortable ? false:'custom'">
        <template slot-scope="scope">
          <template v-if="isClick(item.prop)">
            <span :class="[echoColor(item.prop),'shou']" @click="goDetail(scope.row,item.prop)">{{scope.row[item.prop]}}</span>
          </template>
          <template v-else-if="item.prop === 'leader_id'">
            {{scope.row.leader_info?scope.row.leader_info.name:''}}
          </template>
          <template v-else>
            {{ scope.row[item.prop] }}
          </template>
        </template>
      </el-table-column>
    </el-table>

    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
    

  </div>
</template>

<script>

import {
    Apiprojectfunds,
} from '@/api'
import printComp from '@/components/printComp.vue'
export default {
  name: 'verticalFunding',
  components:{
    printComp
  },
  computed:{
    properties(){
      return this.headerList.reduce((arr,item)=>{
        arr.push({
          field: item.prop,
          displayName: item.label
        })
        return arr
      },[])
    }
  },
  data(){
    return{
      Apiprojectfunds,
      tableData:[], 

      pageparm: {
        page: 1,
        perPage: 20,
        total: null,
        sort_str: null, 
        sort_order: 'desc' ,
      },
      tableLoading: false,

      clickList: ['receive_funds','expend_funds','outside_funds','matching_funds','self_funds','hospital_funds'],

      headerList:[{
        prop: 'name',
        label: '项目名称',
        width: '250',
        sort: true
      },{
        prop: 'project_code',
        label: '项目编号',
        width: '150',
        sort: true
      },{
        prop: 'leader_id',
        label: '负责人',
        width: '130',
        sort: true,
        exportName:'leader_info.name',
      },{
        prop: 'project_funds',
        label: '合同经费(万元)',
        width: '160',
        sort: true
      },{
        prop: 'receive_funds',
        label: '到账经费(万元)',
        width: '160',
        noSortable: true
      },{
        prop: 'matching_funds',
        label: '配套经费(万元)',
        width: '160',
        noSortable: true
      },{
        prop: 'self_funds',
        label: '自筹经费(万元)',
        width: '160',
        noSortable: true
      },{
        prop: 'hospital_funds',
        label: '院内经费(万元)',
        width: '160',
        noSortable: true
      },{
        prop: 'expend_funds',
        label: '支出经费(万元)',
        width: '160',
        noSortable: true
      },{
        prop: 'outside_funds',
        label: '外拨经费(万元)',
        width: '160',
        noSortable: true
      },{
        prop: 'balance_funds',
        label: '余额经费(万元)',
        width: '160',
        noSortable: true
      }],
      
      path:{
        receive_funds: '/funds/verticalFunding_arrival',
        expend_funds: '/funds/verticalFunding_expenditure',
        outside_funds: '/funds/verticalFunding_allocation',
        matching_funds: '/funds/verticalFunding_matching',
        self_funds: '/funds/verticalFunding_self',
        hospital_funds: '/funds/verticalFunding_hospital'
      }
    }
  },
  activated(){
    this.getList()
    this.$nextTick(()=>{
      this.$refs.table.doLayout()
    })
  },
  methods:{
    printData(data){
      data.forEach(item => {
        item.leader_id = item.leader_info ? item.leader_info.name : ''
      });
      return data
    },
    echoColor(prop){
      switch (prop) {
        case 'expend_funds':
        case 'outside_funds': return "c-green";
        default: return 'c-blue'
      }
    },
    isClick(prop){
      return this.clickList.includes(prop)
    },
    goDetail(val,i){
      this.$router.push({path:this.path[i],query:{id: val.id}})
    },

    tableSortChange(column){
      if (column.order === "descending") {
        this.pageparm.sort_str = column.prop;
        this.pageparm.sort_order = "desc";
      } else if (column.order === "ascending") {
        this.pageparm.sort_str = column.prop;
        this.pageparm.sort_order = "asc";
      }else{
        this.pageparm.sort_str = null;
        this.pageparm.sort_order = null;
      }
      this.getList()
    },
    //搜索
    clearSearch(){
      this.$refs.search_e.clear()
    },
    searchChane(i,val){
      this.pageparm[val] = i
      this.pageparm.page = 1
      this.getList()
    },
    //分页
    callFather(pageparm){
      this.pageparm.page = pageparm.page
      this.pageparm.perPage = pageparm.perPage
      this.getList()
    },
    getList(){
      this.tableLoading = true
      Apiprojectfunds(this.pageparm).then(({data,page}) => {
        this.tableData = data || []
        this.pageparm.total = page.total
        this.tableLoading = false
      }).catch(()=>{
        this.tableLoading = false
      })
    },
  },

}
</script>
